let droppedFiles = false
let fileName = ''
const dropzone = document.querySelector(".dropzone")
const button = document.querySelector(".upload-btn")
let uploading = false
const syncing = document.querySelector(".syncing")
const done = document.querySelector(".done")
const bar = document.querySelector(".bar")

let timeoutId;

function preventDefaults(e){
    e.preventDefault()
    e.stopPropagation()
}

// dropzone.addEventListener("drag", e=>{
//     preventDefaults(e)
// })

dropzone.addEventListener("dragover", e=>{
    console.log("drag over");
    
    preventDefaults(e)
    addDragOverClass()
})

dropzone.addEventListener("dragenter", e=>{
    console.log("drag enter");
    preventDefaults(e)
    addDragOverClass()
})

dropzone.addEventListener("dragleave", e=>{
    console.log("drag leave");
    preventDefaults(e)
    removeDragOverClass()
})
dropzone.addEventListener("dragend", e=>{
    console.log("drag end");
    preventDefaults(e)
    removeDragOverClass()
})

dropzone.addEventListener("drop", e=>{
    console.log("drop");
    preventDefaults(e)
    removeDragOverClass()
})


function addDragOverClass() {
    console.log("add before:{}", dropzone.getAttribute("class"))
    dropzone.classList.add("is-dragover")
    console.log("add after:{}", dropzone.getAttribute("class"))
}

function removeDragOverClass() {
    console.log("remove before:{}", dropzone.getAttribute("class"))
    dropzone.classList.remove("is-dragover")
    console.log("remove after:{}", dropzone.getAttribute("class"))
}

dropzone.addEventListener("drop", handleDrop)

function handleDrop(e) {
    const files = e.dataTransfer.files;
    if (files.length === 0) {
        alert("No files dropped")
        return;
    }

    fileName = files[0].name
    console.log(fileName);
    document.querySelector(".filename").textContent = fileName
    document.querySelector(".upload").style.display = "none"

}


button.addEventListener("click", () => {
    startUpload()
})


document.querySelector(".input").addEventListener("change", (e) => {
    console.log("change");
    
    fileName = e.target.files[0].name
    console.log(fileName);
    document.querySelector(".filename").textContent = fileName
    document.querySelector(".upload").style.display = "none"
})

function startUpload(){
    if(!uploading && fileName != ''){
        uploading = true;
        button.textContent = "Uploading..."
        dropzone.style.opacity = 0
        syncing.classList.add("active")

        bar.classList.add("active")
        timeoutId = window.setTimeout(showDone, 3200)
    }
}

function showDone(){
    done.classList.add("active")
    button.textContent = "Done"
}